<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>
<script>
    //ajax的封装
    //1.ajax获取数据。
    //2.ajax传输数据。
    //3.ajax封装的可变的参数
    //请求方式 - 默认是get
    //接口地址 - 一定不能为空
    //同步异步 - 默认是异步
    //是否传输数据 - 对象格式 - (get和post区别)
    //捕获错误

    //将对象转换成ajax传输数据识别的格式。
    function objtostring(obj) {
        if (Object.prototype.toString.call(obj) === '[object Object]') {
            let arr = [];
            for (let attr in obj) {
                arr.push(attr + '=' + obj[attr]);
            }
            return arr.join('&');
        }
    }
    //函数封装注意的问题
    //1.如果函数的参数超过4个,函数的使用受到影响(对象做参数)
    //2.函数的实参和形参一一匹配(对象做参数，对象是无序的)
    //3.Object.assign() -- js封装插件的核心。
    function $ajax(option) { //option:配置参数
        let xhr = new XMLHttpRequest();
        //1.配置请求方式
        option.type = option.type || 'get';

        //2.请求和发送的接口地址,不能为空
        if (!option.url) {
            throw new Error('接口地址不能为空');
        }

        //3.是否异步
        if (option.async === false || option.async === 'false') { //同步
            option.async = false;
        } else {
            option.async = true;
        }

        //4.传输数据 - 格式是对象 - get方式
        //数据是否存在，存在转换格式。
        if (option.data && option.type === 'get') { //数据存在，请求方式是get
            option.url += '?' + objtostring(option.data);
        }
        xhr.open(option.type, option.url, option.async);

        // 4.传输数据 - 格式是对象 - post方式
        // 数据是否存在，存在转换格式。
        if (option.data && option.type === 'post') { //数据存在，请求方式是post
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send(objtostring(option.data));
        } else {
            xhr.send();
        }

        //3.是否异步
        if (option.async) { //异步,需要就绪状态码完成
            xhr.onload = function() {
                if (xhr.readyState === 4) { //send解析完成
                    if (xhr.status === 200) { //接口地址正确
                        option.success && typeof option.success === 'function' && option.success(xhr.responseText); //实参
                    } else {
                        option.error && typeof option.error === 'function' && option.error('接口地址有误'); //实参
                    }
                }
            }
        } else { //同步,代码顺序加载，无需就绪状态码。
            if (xhr.status === 200) {
                option.success && typeof option.success === 'function' && option.success(xhr.responseText); //实参
            } else {
                option.error && typeof option.error === 'function' && option.error('接口地址有误'); //实参
            }
        }
    }
    //对象的参数不要去修改，后期有类似的方法。
    $ajax({
        type: 'post', //请求方式，默认get
        url: 'http://localhost/JS2104/Day18_ajax/data/taobao.php', //请求发送的接口地址,不能为空。
        data: { //数据格式是对象
            a: 1,
            b: 2,
            c: 3
        },
        async: 'false', //是否异步，默认异步
        success: function(data) { //成功的回调
            console.log(data);
        },
        error: function(err) { //请求接口失败的回调
            throw new Error(err);
        }
    });
</script>